<template>
  <div class="bodycss">
    <div class="m_title">
      <div class="date">{{ date }}</div>
      <img src="~@/assets/images/title-null.png" width="100%" />
      <div class="time">{{ time }}</div>
    </div>
    <div class="m_cont">
      <div class="m_cont_left">
        <div class="m_left_box_a"><box-left-a /></div>
        <div class="m_cont_box bg1">
          <div class="v_tit">厂家生产进度</div>
          <div class="v_cont"><box-left-b /></div>
        </div>
        <div class="m_cont_box_2">
          <div class="v_item">
            <div class="v_tit">交货不良率</div>
            <div class="v_cont"><box-left-c /></div>
          </div>
          <div class="v_item">
            <div class="v_tit">厂家采购占比</div>
            <div class="v_cont"><box-left-d /></div>
          </div>
        </div>
        <div class="m_cont_box">
          <div class="v_tit">本日应交货</div>
          <div class="v_cont"><box-left-e /></div>
        </div>
      </div>
      <div class="m_cont_mid">
        <box-mid-a />
        <box-mid-b />
        <div class="m_cont_box_3">
          <div class="v_item">
            <div class="v_tit">生产进度</div>
            <div class="v_cont"><box-mid-c /></div>
          </div>
          <div class="v_item">
            <div class="v_tit">当日时产量</div>
            <div class="v_cont"><box-mid-d /></div>
          </div>
        </div>
      </div>
      <div class="m_cont_right">
        <div class="m_right_box_a"><box-right-a /></div>
        <div class="m_cont_box bg1">
          <div class="v_tit_a">订单分布</div>
          <div class="v_cont" style="margin-top: -10px"><box-right-b /></div>
        </div>
        <div class="m_cont_box_2">
          <div class="v_item2">
            <div class="v_tit">本月交货</div>
            <div class="v_cont"><box-right-c /></div>
          </div>
          <div class="v_item">
            <div class="v_tit">发货地占比</div>
            <div class="v_cont"><box-right-d /></div>
          </div>
        </div>
        <div class="m_cont_box">
          <div class="v_tit">本日应交货</div>
          <div class="v_cont"><box-right-e /></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import BoxLeftA from '@/views/sud-cust/box-left-a.vue'
import BoxLeftB from '@/views/sud-cust/box-left-b.vue'
import BoxLeftC from '@/views/sud-cust/box-left-c.vue'
import BoxLeftD from '@/views/sud-cust/box-left-d.vue'
import BoxLeftE from '@/views/sud-cust/box-left-e.vue'
import BoxRightA from '@/views/sud-cust/box-right-a.vue'
import BoxRightB from '@/views/sud-cust/box-right-b.vue'
import BoxRightC from '@/views/sud-cust/box-right-c.vue'
import BoxRightD from '@/views/sud-cust/box-right-d.vue'
import BoxRightE from '@/views/sud-cust/box-right-e.vue'
import BoxMidA from '@/views/sud-cust/box-mid-a.vue'
import BoxMidB from '@/views/sud-cust/box-mid-b.vue'
import BoxMidC from '@/views/sud-cust/box-mid-c.vue'
import BoxMidD from '@/views/sud-cust/box-mid-d.vue'
import dayjs from 'dayjs'
export default {
  name: 'HomePage',
  components: {
    BoxLeftA,
    BoxLeftB,
    BoxLeftC,
    BoxLeftD,
    BoxLeftE,
    BoxRightA,
    BoxRightB,
    BoxRightC,
    BoxRightD,
    BoxRightE,
    BoxMidA,
    BoxMidB,
    BoxMidC,
    BoxMidD
  },
  props: {
    msg: String
  },
  mounted() {
    this.refreshData()
  },
  data() {
    return {
      date: '',
      time: '',
      dateIntervalIns: null,
      timeIntervalIns: null
    }
  },
  methods: {
    refreshData() {
      this.dateIntervalIns && clearInterval(this.dateIntervalIns)
      this.timeIntervalIns && clearInterval(this.timeIntervalIns)
      this.getRealDate()
      this.getRealTime()
      this.dateIntervalIns = setInterval(this.getRealDate.bind(this), 1000 * 60 * 60 * 12)
      this.timeIntervalIns = setInterval(this.getRealTime.bind(this), 1000)
    },
    getRealDate() {
      const weekNum = dayjs().day()
      const map = {
        0: '星期日',
        1: '星期一',
        2: '星期二',
        3: '星期三',
        4: '星期四',
        5: '星期五',
        6: '星期六'
      }
      this.date = dayjs().format('YYYY-MM-DD') + ' ' + map[weekNum]
    },
    getRealTime() {
      this.time = dayjs().format('HH:mm:ss')
    }
  },
  destroyed() {
    clearInterval(this.dateIntervalIns)
    clearInterval(this.timeIntervalIns)
  }
}
</script>
<style scoped>
.bodycss {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-image: url(~@/assets/images/bg.jpg);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.m_title {
  position: relative;
  z-index: 5;
}
.date,
.time {
  display: inline;
  position: absolute;
  color: #fff;
  font-size: 1.2rem;
  font-weight: 600;
  top: 16px;
}
.date {
  left: 40px;
}
.time {
  right: 40px;
}
.m_title::before {
  position: absolute;
  width: 100%;
  height: 176px;
  content: '';
  background-image: url(~@/assets/images/title.png);
  background-repeat: no-repeat;
  background-size: 100%;
}
.m_cont {
  display: flex;
  flex: 1;
}
.m_cont_left {
  width: 509px;
  margin-left: 10px;
  margin-bottom: 10px;
  padding: 15px 12px 15px 10px;
  background-image: url(~@/assets/images/bg-left.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.m_cont_mid {
  width: 882px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.m_cont_right {
  width: 509px;
  margin-right: 10px;
  margin-bottom: 10px;
  padding: 15px 12px 15px 10px;
  background-image: url(~@/assets/images/bg-right.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.m_left_box_a {
  padding: 4px 10px;
  display: flex;
  background-image: url(~@/assets/images/left-cont-bg-a.png);
  background-repeat: no-repeat;
  background-size: 100%;
}
.m_left_box_a .v_item {
  flex: 1;
}

.m_cont_box {
  margin-top: 5px;
  padding: 0px 10px;
  background-image: url(~@/assets/images/cont-bg.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.m_cont_box.bg1 {
  background-image: url(~@/assets/images/cont-bg1.png);
}
.m_cont_box .v_tit {
  color: #4ccafd;
  font-size: 18px;
  text-align: left;
  padding: 10px 0 0 10px;
}
.m_cont_box .v_tit_a {
  color: #00f6ff;
  font-weight: 600;
  font-size: 18px;
  padding: 0;
  background-image: url(http://localhost:8082/img/cont-bg3.7ffb580c.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  height: 40px;
  text-align: center;
  line-height: 40px;
}
.m_cont_box_2 {
  margin-top: 5px;
  display: flex;
  padding: 0px 10px;
  background-image: url(~@/assets/images/cont-bg.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.m_cont_box_2 .v_item {
  flex: 6;
}
.m_cont_box_2 .v_item2 {
  flex: 4;
}
.m_cont_box_2 .v_tit {
  color: #4ccafd;
  font-size: 18px;
  text-align: left;
  padding: 10px 0 0 10px;
}
.m_cont_box_3 {
  display: flex;
  padding-bottom: 18px;
}
.m_cont_box_3 .v_item {
  flex: 1;
  padding: 10px;
  background-image: url(~@/assets/images/cont-bg10.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.m_cont_box_3 .v_tit {
  color: #4ccafd;
  font-size: 18px;
  text-align: left;
  padding: 10px 0 0 10px;
}
</style>
